<cd-loading-panel *ngIf="editing && loading && !error"
                  i18n>Loading bucket data...</cd-loading-panel>

<div class="col-sm-12 col-lg-6"
     *ngIf="!loading && !error">
  <form name="bucketForm"
        #frm="ngForm"
        [formGroup]="bucketForm"
        novalidate>
    <div class="card">
      <div i18n="form title|Example: Create Pool@@formTitle"
           class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div>

      <div class="card-body">
        <!-- Id -->
        <div class="form-group row"
             *ngIf="editing">
          <label i18n
                 class="col-form-label col-sm-3"
                 for="id">Id</label>
          <div class="col-sm-9">
            <input id="id"
                   name="id"
                   class="form-control"
                   type="text"
                   formControlName="id"
                   readonly>
          </div>
        </div>

        <!-- Name -->
        <div class="form-group row">
          <label class="col-form-label col-sm-3"
                 for="bid">
            <ng-container i18n>Name</ng-container>
            <span class="required"
                  *ngIf="!editing"></span>
          </label>
          <div class="col-sm-9">
            <input id="bid"
                   name="bid"
                   class="form-control"
                   type="text"
                   i18n-placeholder
                   placeholder="Name..."
                   formControlName="bid"
                   [readonly]="editing"
                   [autofocus]="!editing">
            <span class="invalid-feedback"
                  *ngIf="bucketForm.showError('bid', frm, 'required')"
                  i18n>This field is required.</span>
            <span class="invalid-feedback"
                  *ngIf="bucketForm.showError('bid', frm, 'bucketNameInvalid')"
                  i18n>The value is not valid.</span>
            <span class="invalid-feedback"
                  *ngIf="bucketForm.showError('bid', frm, 'bucketNameExists')"
                  i18n>The chosen name is already in use.</span>
          </div>
        </div>

        <!-- Owner -->
        <div class="form-group row">
          <label class="col-form-label col-sm-3"
                 for="owner">
            <ng-container i18n>Owner</ng-container>
            <span class="required"></span>
          </label>
          <div class="col-sm-9">
            <select id="owner"
                    name="owner"
                    class="form-control custom-select"
                    formControlName="owner"
                    [autofocus]="editing">
              <option i18n
                      *ngIf="owners === null"
                      [ngValue]="null">Loading...</option>
              <option i18n
                      *ngIf="owners !== null"
                      [ngValue]="null">-- Select a user --</option>
              <option *ngFor="let owner of owners"
                      [value]="owner">{{ owner }}</option>
            </select>
            <span class="invalid-feedback"
                  *ngIf="bucketForm.showError('owner', frm, 'required')"
                  i18n>This field is required.</span>
          </div>
        </div>

        <!-- Placement target -->
        <div class="form-group row">
          <label class="col-form-label col-sm-3"
                 for="placement-target">
            <ng-container i18n>Placement target</ng-container>
            <span class="required"
                  *ngIf="!editing"></span>
          </label>
          <div class="col-sm-9">
            <ng-template #placementTargetSelect>
              <select id="placement-target"
                      name="placement-target"
                      formControlName="placement-target"
                      class="form-control custom-select">
                <option i18n
                        *ngIf="placementTargets === null"
                        [ngValue]="null">Loading...</option>
                <option i18n
                        *ngIf="placementTargets !== null"
                        [ngValue]="null">-- Select a placement target --</option>
                <option *ngFor="let placementTarget of placementTargets"
                        [value]="placementTarget.name">{{ placementTarget.description }}</option>
              </select>
              <span class="invalid-feedback"
                    *ngIf="bucketForm.showError('placement-target', frm, 'required')"
                    i18n>This field is required.</span>
            </ng-template>
            <ng-container *ngIf="editing; else placementTargetSelect">
              <input id="placement-target"
                     name="placement-target"
                     formControlName="placement-target"
                     class="form-control"
                     type="text"
                     readonly>
            </ng-container>
          </div>
        </div>

        <!-- Versioning -->
        <div class="form-group row"
             *ngIf="editing">
          <legend class="cd-header ml-5 mr-5"
                  i18n>Versioning</legend>
          <div class="col-sm-9 offset-sm-3">
            <input type="radio"
                   id="enabled"
                   name="versioning"
                   formControlName="versioning"
                   value="Enabled"
                   [checked]="bucketForm.get('versioning').value == 'Enabled'"
                   class="custom-control custom-radio custom-control-inline align-top">
            <label class="align-text-top"
                   for="enabled">
              <span i18n>Enabled</span>
              <div class="text-muted"
                   i18n>Enables versioning for the objects in the bucket.</div>
            </label>
          </div>
          <div class="col-sm-9 offset-sm-3">
            <input type="radio"
                   id="suspended"
                   name="versioning"
                   formControlName="versioning"
                   value="Suspended"
                   [checked]="bucketForm.get('versioning').value != 'Enabled'"
                   class="custom-control custom-radio custom-control-inline align-top">
            <label class="align-text-top"
                   for="suspended">
              <span i18n>Suspended</span>
              <div class="text-muted"
                   i18n>Disables versioning for the objects in the bucket.</div>
            </label>
          <span class="invalid-feedback"
                *ngIf="bucketForm.showError('versioning', frm, 'required')"
                i18n>This field is required.</span>
          </div>
        </div>

      </div>
      <div class="card-footer">
        <div class="button-group text-right">
          <cd-submit-button (submitAction)="submit()"
                            i18n="form action button|Example: Create Pool@@formActionButton"
                            [form]="bucketForm">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
          <cd-back-button></cd-back-button>
        </div>
      </div>
    </div>
  </form>
</div>
